<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echarts的基本使用</title>
    <!-- 导入echarts -->
    <script src="echarts.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .echarts {
            width: 100%;
            height: 600px;
            /* border: 1px solid #ccc; */
        }
    </style>
</head>

<body>

    <!-- 拿一个容器来放echarts -->
    <div class="echarts"></div>


</body>

</html>

<script>
    // 获取容器
    let dom = document.querySelector('.echarts')
    // 初始化 echarts echats.init(dom)
    let myEcharts = echarts.init(dom)
    console.log(echarts);
    // 我们可以看到 如果数据多的话 不好做 那么我们可以把数据独立出来 是一个二维数组
    let data = [
        [13, 44],
        [51, 51],
        [51, 32],
        [67, 19],
        [19, 33]
    ]
    // 指定图表的配置项和数据
    myEcharts.setOption({


        // 设置字符集
        dataset: {

            source: data
        },
        title: {
            // 标题
            text: '散点图',

        },
        // 设置x轴
        xAxis: {
            type: 'category'
        },
        // 设置y轴
        yAxis: {
            // 显示刻度
            axisTick: {
                show: true

            },
            // 显示线体
            axisLine: {
                show: true

            }
        },
        // 系列的设置：绘制什么样的图表，数据的展示
        series: [
            {
                type: 'scatter',
                encode: { x: 0, y: 1 }
            },

        ],

    })
</script>